<script setup lang="ts">
import { PropType, ref } from "vue";
import { NodeInfo } from "../node/FlowableType";
import { userList } from "@/api/user";
import { roleList } from "@/api/role";
import { ProcessDefineVO } from "@/api/flowable";

type ApproverValue = {
  label: string;
  value: string;
};

const props = defineProps({
  updateNode: {
    type: Function,
    default: (id: string) => {
      console.log(id);
    }
  },
  processDefineVO: {
    type: Object as PropType<ProcessDefineVO>
  }
});

const info = ref<NodeInfo>();

const fields = ref<Array<any>>();

const approverValueList = ref<Array<ApproverValue>>([]);

const init = (nodeInfo: NodeInfo | undefined) => {
  if (nodeInfo) {
    switch (nodeInfo.nodeType) {
      case "bpmn:UserTask":
        nodeInfo.sequential = nodeInfo.sequential || false;
        nodeInfo.signType = nodeInfo.signType || "OR_DIGN";
        nodeInfo.condition = null;
        nodeInfo.userTaskType = nodeInfo.userTaskType || "EXAMINE";
        nodeInfo.name = nodeInfo.name || "用户任务";
        break;
      case "bpmn:SequenceFlow":
        // 获取字段属性
        getBusinessFields();
        nodeInfo.condition = nodeInfo.condition || [];
        nodeInfo.userTaskType = null;
        nodeInfo.sequential = null;
        nodeInfo.signType = null;
        nodeInfo.assigneeType = null;
        nodeInfo.assigneeValue = null;
        break;
      default:
        nodeInfo.userTaskType = null;
        nodeInfo.sequential = null;
        nodeInfo.signType = null;
        nodeInfo.assigneeType = null;
        nodeInfo.assigneeValue = null;
        nodeInfo.condition = null;
        break;
    }
  }
  info.value = nodeInfo;
  updateName();
};

const getBusinessFields = () => {
  fields.value = [
    {
      columnApi: "金额",
      columnName: "金额"
    }
  ];
};

const approverTypeChange = async (value: string) => {
  approverValueList.value = [];
  if (info.value) {
    info.value.assigneeValue = null;
  }
  switch (value) {
    case "USER":
      {
        const userRes = await userList();
        if (userRes.success) {
          approverValueList.value = userRes.data.map((item: any) => {
            return {
              label: item.nickName,
              value: item.id
            };
          });
        }
      }
      break;
    case "ROLE":
      {
        const roleRes = await roleList();
        if (roleRes.success) {
          approverValueList.value = roleRes.data.map((item: any) => {
            return {
              label: item.roleName,
              value: item.id
            };
          });
        }
      }
      break;
    default:
      break;
  }
};

const updateName = () => {
  if (props.updateNode) {
    props.updateNode(info.value?.id);
  }
};

defineExpose({
  init
});
</script>

<template style="position: absolute">
  <el-form v-if="info" :model="info" label-width="120px">
    <el-form-item label="节点id">
      <el-input v-model="info.id" :disabled="true" />
    </el-form-item>
    <el-form-item label="节点名称">
      <el-input v-model="info.name" @change="updateName" />
    </el-form-item>
    <el-form-item label="节点类型">
      <el-input v-model="info.nodeType" :disabled="true" />
    </el-form-item>

    <template v-if="info.nodeType === 'bpmn:SequenceFlow'" />

    <template v-if="info.nodeType === 'bpmn:UserTask'">
      <el-form-item label="用户任务类型">
        <el-radio-group v-model="info.userTaskType">
          <el-radio label="EXAMINE">审批</el-radio>
          <el-radio label="CC">抄送</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="人员类型">
        <el-radio-group
          v-model="info.assigneeType"
          @change="approverTypeChange"
        >
          <el-radio label="USER">指定用户</el-radio>
          <el-radio label="ROLE">指定角色</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="人员">
        <el-select v-model="info.assigneeValue" multiple>
          <el-option
            v-for="item in approverValueList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <template v-if="info.userTaskType === 'EXAMINE'">
        <el-form-item label="是否顺序审批">
          <el-switch v-model="info.sequential" />
        </el-form-item>
        <el-form-item label="是否会签">
          <el-radio-group v-model="info.signType">
            <el-radio label="COUNTER_SIGN">会签</el-radio>
            <el-radio label="OR_DIGN">或签</el-radio>
          </el-radio-group>
        </el-form-item>
      </template>
    </template>
  </el-form>
</template>

<style></style>
